<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>连接帮助</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            color: #ffffff;
            font-family: "Heiti SC","Droid Sans","Helvetica Neue","Microsoft YaHei",Helvetica,Arial,sans-serif;
            text-overflow: ellipsis;
            /*overflow-x: hidden;*/
            white-space: nowrap;
            width: 100%;
            /*height: 100%;*/
            /*background-color: #132438;*/
        }
        tr, td {
            width: 100%;
            padding: 0;
            margin: 0;
        }
        #content {
            width: 100%;
            overflow: hidden;
            /*background-color: #132438;*/
        }

        #help_back_btn {
            width: 40px;
            height: 40px;
            position: fixed;
            margin: 22px;
            z-index: 10;
            background: url('./img/back_default@2x.png') no-repeat;
            background-position: 0px 0px;
            background-size: 40px 80px;
        }

        #help_back_btn:active {
            background-position: 0px -40px;
        }

        #carlife_help_title {
            position: fixed;
            width: 100%;
            height: 82px;
            overflow: hidden;
            text-align: center;
            /*background-color: #132438;*/
            z-index: 9;
        }

        #carlife_help_title p{
            font-size: 20px;
            padding: 10px 0 0 0;
        }

        .carlife-help-desc {
            width: 100%;
            height: 45px;
            overflow: hidden;
            text-align: center;
        }

        .carlife-help-desc p {
            margin: 0;
            padding: 0;
            float: left;
            margin: 0 0 0 5%;
            font-size: 16px;
        }
        .carlife-help-pic-table {
            width: 100%;
            height: 60%;
            text-align: center;
        }
        .carlife-help-pic-table table{
            width: 100%;
            margin: 0 0 20px 0;
        }
        .carlife-help-pic-table td{
            width: 80%;
        }
        .carlife-help-img-box {
            float: left;
            width: 100%;
            text-align: left;

        }
        .carlife-help-img-box img {
            width: 100%;

        }
        .carlife-help-desc-box {
            /*background-color: red;*/
            float: left;
            width: 50%;
        }
        .carlife-help-desc-box p{
            float: left;
            font-size: 15px;
        }
        .carlife-help-desc-box-left {
            margin-left: 20%;
        }

        .carlife-help-desc-box-right {
            margin-left: 16%;
        }

        .carlife-help-point-box {
            background-color: #ffffff;
            width: 10px;
            height: 10px;
            color: #000000;
            border-radius: 20px;
            margin: 0 10px 0 0;
            padding: 1px 7px 2px 7px;
        }
        /*#black_box {*/
            /**/
        /*}*/

    </style>
</head>
<body onload="initPage()">
<div id="content">
    <div id="help_back_btn" ontouchend="carlifeH5Back()"></div>
    <div id="carlife_help_title"><p>连接帮助</p></div>
    <div id="scrop_box" style="overflow-y: auto;margin-top: 82px;">
        <div id="black_box" style="display: none;">

            <div class="carlife-help-desc"><p>开启“USB调试”</p></div>
            <div class="carlife-help-pic-table">
                <table>
                    <tbody>
                    <tr>
                        <td>
                            <div class="carlife-help-img-box"><img class="carlife-help-img" src="./img/android_link_details_1.png" alt=""/></div>
                            <!-- <div class="carlife-help-desc-box">
                                <p class="carlife-help-desc-box-left"><font class="carlife-help-point-box">1</font>点击设置</p>
                            </div>
                            <div class="carlife-help-desc-box" style="background-color: green">
                                <p class="carlife-help-desc-box-right"><font class="carlife-help-point-box">2</font>点击开发者选项</p>
                            </div> -->
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="carlife-help-img-box"><img class="carlife-help-img" src="./img/android_link_details_2.png" alt=""/></div>
                            <!-- <div class="carlife-help-desc-box">
                                <p class="carlife-help-desc-box-left"><font class="carlife-help-point-box">3</font>开启开发者选项</p>
                            </div>
                            <div class="carlife-help-desc-box">
                                <p class="carlife-help-desc-box-right"><font class="carlife-help-point-box">4</font>勾选USB调试</p>
                            </div> -->
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>


            <div class="carlife-help-desc"><p>如果设置中找不到“开发者选项”，操作如下</p></div>
            <div class="carlife-help-pic-table">
                <table>
                    <tbody>
                    <tr>
                        <td>
                            <div class="carlife-help-img-box"><img class="carlife-help-img" src="./img/android_link_details_3.png" alt=""/></div>
                            <!-- <div class="carlife-help-desc-box">
                                <p class="carlife-help-desc-box-left"><font class="carlife-help-point-box">1</font>点击关于手机</p>
                            </div>
                            <div class="carlife-help-desc-box">
                                <p class="carlife-help-desc-box-right"><font class="carlife-help-point-box">2</font>多次点击版本号</p>
                            </div> -->
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="carlife-help-img-box"><img class="carlife-help-img" src="./img/android_link_details_4.png" alt=""/></div>
                            <!-- <div class="carlife-help-desc-box">
                                <p class="carlife-help-desc-box-left"><font class="carlife-help-point-box">3</font>返回设置开启</p>
                            </div> -->
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


</div>

<script type="text/javascript">

    function carlifeH5Back() {
        history.back();
    }

    function initPage() {
        var imgs = document.getElementsByClassName("carlife-help-img");
        var imgsBox = document.getElementsByClassName("carlife-help-img-box");

        for (var i = imgs.length - 1; i >= 0; i--) {
            imgs[i].style.width = (document.body.clientWidth * 0.8) + 'px';
            imgs[i].style.marginLeft = (document.body.clientWidth * 0.1 + 'px');
        }

        var tmp = document.createElement('div');
        tmp.innerHTML = '<div class="carlife-help-desc-box"><p class="carlife-help-desc-box-left"><font class="carlife-help-point-box">1</font>点击设置</p></div><div class="carlife-help-desc-box"><p class="carlife-help-desc-box-right"><font class="carlife-help-point-box">2</font>点击开发者选项</p></div>';
        imgsBox[0].appendChild(tmp);

        tmp = document.createElement('div');
        tmp.innerHTML = '<div class="carlife-help-desc-box"><p class="carlife-help-desc-box-left"><font class="carlife-help-point-box">3</font>开启开发者选项</p></div><div class="carlife-help-desc-box"><p class="carlife-help-desc-box-right"><font class="carlife-help-point-box">4</font>勾选USB调试</p></div>';
        imgsBox[1].appendChild(tmp);

        tmp = document.createElement('div');
        tmp.innerHTML = '<div class="carlife-help-desc-box"><p class="carlife-help-desc-box-left"><font class="carlife-help-point-box">1</font>点击关于手机</p></div><div class="carlife-help-desc-box"><p class="carlife-help-desc-box-right"><font class="carlife-help-point-box">2</font>多次点击版本号</p></div>';
        imgsBox[2].appendChild(tmp);

        tmp = document.createElement('div');
        tmp.innerHTML = '<div class="carlife-help-desc-box"><p class="carlife-help-desc-box-left"><font class="carlife-help-point-box">3</font>返回设置开启</p></div>';
        imgsBox[3].appendChild(tmp);

        document.getElementById("black_box").style.display = "block";
        
        document.getElementById('scrop_box').style.height = ((window.innerHeight - 82) + 'px');
    }

</script>

</body>
</html>